<template>
    <div>
        <div class="mydeal-div">
            <div class="mydeal-service-title">
                <span>{{ dealInfo.serviceName }}</span>
            </div>
            <div class="mydeal-address">
                <div>
                    <van-icon name="location-o" />
                </div>
                <div style="margin-left: 10px;">
                    <span>{{ dealInfo.address }}</span>
                </div>
            </div>
            <div class="mydeal-more">
                <DisplayLine f="服务编号" :s="dealInfo.id"></DisplayLine>
                <DisplayLine f="服务医生" :s="dealInfo.doctorName + '(' + dealInfo.doctorJob + ')'"></DisplayLine>
                <DisplayLine f="上门服务费" :s="'￥' + dealInfo.homeServiceFee"></DisplayLine>
                <DisplayLine f="操作费" :s="'￥' + dealInfo.operatingFee"></DisplayLine>
                <DisplayLine f="总费用" :s="'￥' + dealInfo.totalFee"></DisplayLine>
                <DisplayLine f="服务时间" :s="dealInfo.createTime"></DisplayLine>
            </div>
        </div>
        <div class="divider"></div>
    </div>
</template>

<script>
import DisplayLine from '../DisplayLine'
export default {
    name: "MyDeal",
    props: ['dealInfo'],
    components: {
        DisplayLine
    },
}
</script>

<style scoped>
.mydeal-service-title {
    padding: 5px 0 5px 0;
    font-size: 1rem;
}

.mydeal-div {
    width: 90%;
    margin: 0 auto;
}

.mydeal-service-content {
    padding: 5px 0 5px 0;
    font-size: 0.8rem;
    color: gray;
}

.mydeal-address {
    padding: 5px 0 5px 0;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.displayLine-div {
    font-size: 0.9rem;
}

.mydeal-more .displayLine-div {
    height: 30px;
}

.divider {
    height: 10px;
    background-color: rgb(246, 242, 242);
}
</style>